<template>
  <div id="UserListPage">
    <a-card class="container">
      <a-form
          :model="formSearchParams"
          :style="{ marginBottom: '20px' }"
          layout="inline"
          @submit="doSearch"
      >
        <a-form-item name="id" label="编号">
          <a-input
              v-model:value="formSearchParams.id"
              placeholder="请输入用户编号"
          />
        </a-form-item>
        <a-form-item name="userName" label="用户名">
          <a-input
              v-model:value="formSearchParams.userName"
              placeholder="请输入用户名"
          />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" style="width: 100px">
            搜索
          </a-button>
          <a-button
              @click="doReset"
              type="default"
              html-type="button"
              style="margin-left: 15px; width: 100px"
          >
            重置
          </a-button>
        </a-form-item>
      </a-form>
      <a-space style="margin: 0 0 15px">
        <a-button
            type="primary"
            :icon="h(PlusOutlined)"
            @click="showModal('add', {})"
        >添加用户
        </a-button>
      </a-space>
      <a-table
          :columns="columns"
          :data-source="dataList"
          :pagination="{
          current: searchParams.pageNo,
          pageSize: searchParams.pageSize,
          pageSizeOptions,
          total,
          showSizeChanger: true,
          showTotal: (total: number, range: number[]) =>
            `共 ${total} 条数据 第 ${range[0]}-${range[1]} 条`,
        }"
          @change="handleTableChange"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'username'">
            <span>
              <smile-outlined />
              {{ column.title }}
            </span>
          </template>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button
                type="link"
                size="small"
                @click="showModal('edit', record)"
                style="padding: 0"
            >修改
            </a-button>
            <a-button type="link" danger size="small" @click="doDelete(record)"
            >删除
            </a-button>
            <!--     冻结/解封账号状态       -->
            <a-button
                v-if="record.userStatus === 0"
                type="link"
                size="small"
                style="padding: 0"
                @click="doFreeze(record)"
            >冻结账号
            </a-button>
            <a-button
                v-else
                type="link"
                size="small"
                style="padding: 0"
                @click="doUnfreeze(record)"
            >解封
            </a-button>
          </template>
          <template v-else-if="column.key === 'userAvatar'">
            <template v-if="record.userAvatar">
              <a-image
                  :src="record.userAvatar"
                  alt="用户头像"
                  :width="50"
                  :height="50"
              />
            </template>
            <template v-else>
              <a-image
                  :width="50"
                  :height="50"
                  :preview="false"
                  src="https://www.antdv.com/#error"
                  fallback=""
              />
            </template>
          </template>
          <template v-else-if="column.key === 'userRole'">
            <template v-if="record.userRole === 'admin'">
              <a-tag color="green">管理员</a-tag>
            </template>
            <template v-else>
              <a-tag color="blue">用户</a-tag>
            </template>
          </template>
          <template v-else-if="column.key === 'createTime'">
            <template v-if="record.createTime">
              {{ dateFormat(record.createTime, "yyyy-MM-dd hh:mm:ss") }}
            </template>
          </template>
          <template v-else-if="column.key === 'userStatus'">
            <template v-if="record.userStatus === 0">
              <a-tag color="green">正常</a-tag>
            </template>
            <template v-else>
              <a-tag color="red">冻结</a-tag>
            </template>
          </template>
        </template>
      </a-table>
    </a-card>
    <UserModal
        :model-value="open"
        :title="title"
        :on-cancel="onCancel"
        :on-ok="handleOk"
        :width="600"
        :record="currentRow"
    />
  </div>
</template>
<script lang="ts" setup>
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
import { message, Modal } from "ant-design-vue";
import { createVNode, h, ref, watchEffect } from "vue";
import Api from "../../../api";
import { UserPageReqDTO, UserVo } from "../../../api/globals";
import { dateFormat } from "../../../utils/dateUtil.ts";
import UserModal from "./UserModal.vue";

const pageSizeOptions = ref<string[]>(["10", "20", "30", "40", "50"]);

const open = ref<boolean>(false);
const title = ref<string>("添加");
const currentRow = ref<UserVo>({});

// 确认提交 可能是更新可能是创建
const handleOk = () => {
  open.value = false;
  currentRow.value = {};
  fetchData();
};

const showModal = (type: string, record: UserVo) => {
  open.value = true;
  title.value = type === "add" ? "添加用户" : "修改用户";
  currentRow.value = record;
};

const onCancel = () => {
  open.value = false;
  currentRow.value = {};
};

// 初始化搜索条件（不应该被修改）
const initSearchParams = {
  pageNo: 1,
  pageSize: 10,
};

const searchParams = ref({
  ...initSearchParams,
});

const formSearchParams = ref<UserPageReqDTO>({} as UserPageReqDTO);
/**
 * 执行搜索
 */
const doSearch = () => {
  searchParams.value = {
    ...initSearchParams,
    ...formSearchParams.value,
  };
};

// 数据
const dataList = ref<UserVo[]>([]);
const total = ref(0);

// 获取数据
const fetchData = async () => {
  const res = await Api.general.getUserPage({
    params: {
      ...searchParams.value,
    } as any,
  });
  if (res.data) {
    dataList.value = res.data.list || [];
    total.value = res.data.total || 0;
  } else {
    message.error("获取数据失败 " + res.msg);
  }
};

// 分页变化函数
const handleTableChange = (pagination: any) => {
  searchParams.value = {
    ...searchParams.value,
    pageNo: pagination.current,
    pageSize: pagination.pageSize,
  };
  fetchData();
};

watchEffect(() => {
  fetchData();
});

/**
 * 删除
 * @param record
 */
const doDelete = async (record: UserVo) => {
  if (!record.id) {
    return;
  }
  Modal.confirm({
    title: "确认要删除此用户吗?",
    icon: createVNode(ExclamationCircleOutlined),
    onOk: async () => {
      const res = await Api.general.deleteUser({
        params: {
          id: record.id as number,
        },
      });
      if (res.code === 0) {
        await fetchData();
        message.success("删除成功");
      } else {
        message.error("删除失败，" + res.msg);
      }
    },
  });
};

/**
 * 重置搜索条件
 */
const doReset = () => {
  searchParams.value = {
    ...initSearchParams,
  };
  formSearchParams.value = {} as UserPageReqDTO;
};
// 冻结账号
const doFreeze = async (record: UserVo) => {
  if (!record.id) {
    return;
  }
  Modal.confirm({
    title: "确认要冻结此用户吗?",
    icon: createVNode(SmileOutlined),
    onOk: async () => {
      try {
        const result = await Api.general.updateUserStatus({
          params: {
            id: record.id as number,
            status: 1,
          },
        });
        if (result.code === 0) {
          message.success("冻结成功");
          await fetchData();
          return;
        } else {
          message.error("冻结失败，" + result.msg);
        }
      } catch (e) {
        message.error("请求失败，未知错误");
      }
    },
  });
};
const doUnfreeze = async (record: UserVo) => {
  if (!record.id) {
    return;
  }
  Modal.confirm({
    title: "确认要解冻此用户吗?",
    icon: createVNode(SmileOutlined),
    onOk: async () => {
      try {
        const result = await Api.general.updateUserStatus({
          params: {
            id: record.id as number,
            status: 0,
          },
        });
        if (result.code === 0) {
          message.success("解冻成功");
          await fetchData();
          return;
        } else {
          message.error("解冻失败，" + result.msg);
        }
      } catch (e) {
        message.error("请求失败，未知错误");
      }
    },
  });
};

const columns = [
  {
    key: "id",
    title: "id",
    dataIndex: "id",
    width: "80px",
  },
  {
    key: "userName",
    title: "用户名",
    dataIndex: "userName",
    width: "120px",
  },
  {
    key: "userAccount",
    title: "账号",
    dataIndex: "userAccount",
  },
  {
    key: "userAvatar",
    title: "头像",
    dataIndex: "userAvatar",
  },
  {
    key: "createTime",
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    key: "userRole",
    title: "角色",
    dataIndex: "userRole",
  },
  {
    key: "userStatus",
    title: "账号状态",
    dataIndex: "userStatus",
  },
  {
    title: "操作",
    key: "action",
  },
];
</script>
<style scoped></style>
